<template>
    <el-menu :collapse="!settingStore.isFold" class="menu-container" unique-opened text-color="#fff"
        active-text-color="#1E90FF"
        background-color="#545c64"
        router
        >
        <el-menu-item index="/index">
                <SvgIcon class="menu-title" name="首页" color="#f50"></SvgIcon>
                <span>首页</span>
        </el-menu-item>
        <MenuItem v-if="homeStore.menuTree.length > 0" :data="homeStore.menuTree"></MenuItem>
    </el-menu>
</template>

<script setup>
import MenuItem from './MenuItem.vue';
import SvgIcon from '../svgIcon/SvgIcon.vue';
import { useLayoutStore } from '@/stores/settings'
import {useHomeStore} from '@/stores/index'
import { ref } from 'vue';
const settingStore = useLayoutStore()
const homeStore = useHomeStore()
console.log(homeStore.menuTree)
</script>

<style scoped>
.menu-container {
    background-color: inherit;
}

.el-menu-item:hover {
    background-color: #263445;
}

.menu-title {
    padding-right: 10px;
}
</style>
